import { createApp } from 'vue'
import App from './App.vue'
import { VueQueryPlugin, QueryClient } from '@tanstack/vue-query'
import { WagmiPlugin } from '@metaicons/web3-wallet-kit/plugin'
import { createConfig, http, cookieStorage, createStorage } from '@wagmi/vue'
import {
  mainnet,
  mantle,
  mantleSepoliaTestnet,
  mantleTestnet,
  polygon,
  polygonAmoy,
  ronin,
  saigon,
  sepolia,
} from '@wagmi/vue/chains'
import { defaultConnectors } from '@metaicons/web3-wallet-kit'
import '@metaicons/web3-wallet-kit/style'

export const queryClient = new QueryClient()

const app = createApp(App)

export const config = createConfig({
  chains: [mainnet, sepolia, polygon, polygonAmoy, ronin, saigon, mantle, mantleTestnet, mantleSepoliaTestnet],
  transports: {
    [mainnet.id]: http(),
    [sepolia.id]: http(),
    [polygon.id]: http(),
    [polygonAmoy.id]: http(),
    [ronin.id]: http(),
    [saigon.id]: http(),
    [mantle.id]: http(),
    [mantleTestnet.id]: http(),
    [mantleSepoliaTestnet.id]: http(),
  },
  ssr: false,
  storage: createStorage({
    storage: cookieStorage,
  }),
  connectors: defaultConnectors,
})

app.use(WagmiPlugin, { config }).use(VueQueryPlugin, {queryClient})

app.mount('#app')
